<script setup lang="ts">
import * as Lang from '@/config/lang'

export type SizeType = 'large' | 'default' | 'small'
// 全局初始化 zIndex 的值
const zIndex = 3000
// 全局组件大小 'large' | 'default' | 'small'
const size = ref<SizeType>('default')
// 配置多语言
const locale = shallowRef(Lang['zhCn'])
// 对按钮进行配置
const button = reactive({
  autoInsertSpace: true
})
// 对消息进行配置
const message = reactive({
  // 最多弹出 3 个消息提示框
  max: 3
})

const setSize = (val: SizeType) => {
  size.value = val
}

/**
 * App Provide
 */
provide('app_size', { size, setSize })
</script>

<template>
  <!-- https://element-plus.gitee.io/zh-CN/component/config-provider.html -->
  <el-config-provider
    :size="size"
    :z-index="zIndex"
    :locale="locale"
    :button="button"
    :message="message"
  >
    <RouterView />
  </el-config-provider>
</template>

<style lang="scss">
// 滚动条美化
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
  &:hover {
    background-color: #bbb;
  }
}
::-webkit-scrollbar-track {
  background-color: var(--el-bg-color-page);
  border-radius: 4px;
}

.text-center {
  text-align: center;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 自定义 card
.card {
  border-radius: 4px;
  border: 1px solid var(--el-border-color-light);
  background-color: var(--el-fill-color-blank);
  overflow: hidden;
  color: var(--el-text-color-primary);
  transition: var(--el-transition-duration);
}

.card.is-always-shadow {
  box-shadow: var(--el-box-shadow-light);
}
</style>
